<template>
  <div class="bg-fff pd-10">
    <div class="top">
      <el-radio-group v-model="orderType">
        <el-radio-button :label="item.value" v-for="item in $dict.billAuthTypes" :key="item.value">{{item.label}}
        </el-radio-button>
      </el-radio-group>
      <em class="fx-1"></em>
      <el-checkbox v-model="isCard" label="卡片模式" border></el-checkbox>
    </div>
    <div class="panel">
      <v-bill-card-inventory-list v-if="isCard" :bills="bills.body"></v-bill-card-inventory-list>
      <v-plain-table v-else :data="bills"/>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillCardInventoryList from '@/components/bill-card-inventory-list'
  import vPlainTable from '@/components/plain-table'

  @Component({
    components: {
      vBillCardInventoryList,
      vPlainTable
    }
  })
  export default class Electron extends Vue {
    orderType = 0
    isCard = true
    bills: TableData = {
      header: [
        {
          key: 'no',
          label: '票据编号'
        },
        {
          key: 'date',
          label: '录入日期',
          formatter: row => this.$utils.toTimeFormat(row.date)
        },
        {
          key: 'amount',
          label: '票面金额'
        },
        {
          key: 'billStatus',
          label: '票据状态'
        },
        {
          key: 'n',
          label: '最优意向贴现率'
        },
        {
          key: 'no',
          label: '最优转让额'
        },
        {
          key: 'amount',
          label: '期望金额'
        },
      ],
      body: [
        {
          no: '01230012300123273897239',
          date: +new Date(),
          transType: 1,
          acceptName: '上海上海上海上海上海上海上海上海上海上海',
          amount: 9999999,
          syDate: +new Date(),
          billStatus: '掌柜已通过'
        },
        {
          no: '012300123200123273897239',
          date: +new Date(),
          transType: 1,
          acceptName: '上海上海上海上海上海上海上海上海上海上海',
          amount: 9999999,
          syDate: +new Date(),
          billStatus: '掌柜已通过'
        }
      ],
      footer: {
        total: 100,
        currentPage: 1
      }
    }
  }
</script>

<style lang="less" scoped>
  .bg-fff {
    margin-top: 10px;
  }

  .top {
    display: flex;
    padding-bottom: 20px;
  }

  .operation {
    margin-top: 20px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;
  }
</style>
